<template>
  <div>
    <el-card class="card">
      <div slot="header">条件查询</div>
      <div class="cart-c">
        <el-form label-width="80px" :model="searchForm" ref="searchForms">
          <el-row type="flex" justify="space-around">
            <el-col :span="12">
              <el-form-item label="作者" >
                <el-input
                  placeholder="作者"
                  v-model="searchForm.author"
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标题">
                <el-input
                  placeholder="标题"
                  v-model="searchForm.title"
                   size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="编辑类型">
                <el-select
                  placeholder="编辑类型"
                  v-model="searchForm.editorType"
                   size="mini"
                >
                  <el-option label="富文本" value="0"></el-option>
                  <el-option label="MarkDown" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <el-button type="primary" size="mini" @click="onSubmit"
                  >查询</el-button
                >
                <el-button @click="resetForm('searchForms')" size="mini"
                  >重置</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card class="card">
      <div slot="header">
        <el-button type="primary" @click="addArticle">新增</el-button>
      </div>
      <div>
        <el-table :data="articleList" border style="width: 100%">
          <el-table-column fixed type="index" label="#" align="center">
          </el-table-column>
          <el-table-column
            prop="title"
            label="文章标题"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column label="展示图片" width="150" align="center">
            <template slot-scope="scope">
              <img class="list_img" :src="scope.row.coverImg" alt="" />
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="添加时间" align="center">
          </el-table-column>
          <el-table-column
            prop="author"
            label="文章作者"
            width="300"
            align="center"
          >
          </el-table-column>
          <el-table-column label="文章是否展示" width="120" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isShow"
                :inactive-value="0"
                :active-value="1"
                @change="getChange(scope.row)"
              />
            </template>
          </el-table-column>

          <el-table-column label="内容" width="120" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.editorType == 0">富文本</el-tag>
              <el-tag type="success" v-else>MarkDown</el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="edit(scope.row)" type="parimary" size="small"
                >编辑</el-button
              >
              <el-button type="danger" size="small" @click="del(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import { findArticle, delArticle, changeStatus } from "@/api/article";
export default {
  props: {},
  data() {
    return {
      select: "",
      articleList: [],
      page: {
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40],
        total: 0
      },
      searchForm: {}
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  watch: {},
  methods: {
    init() {
      findArticle(this.page.currentPage, this.page.size, this.searchForm).then(
        res => {
          this.articleList = res.data.rows;
          // console.log(res);
          this.page.total = res.data.total;
        }
      );
    },
    handleSizeChange(val) {
      console.log(val);
      this.page.size = val;
      this.page.currentPage = 1;
      this.init();
    },
    handleCurrentChange(val) {
      // this.start=val
      this.page.currentPage = val;
      this.init();
    },
    edit(row) {
     window.localStorage.setItem('article',JSON.stringify(row))
     this.$router.push({path:'/content/editarticle'})
    },
    del(row) {
      const id = row.id;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delArticle(id).then(res => {
            if (res.success) {
              this.init();
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    onSubmit() {
      // console.log(this.searchForm);
      this.page.currentPage=1
      this.init();
    },
    //重置按钮
    resetForm(formName) {
      this.searchForm = {};
    },
    //改变状态
    getChange(row) {
      var status=row.isShow===0?1:0
    changeStatus({
      id:row.id,
      isShow:row.isShow
    }).then(res=>{
     if(res.success){
       this.$message.success('修改状态成功')
       this.init()
     }else{
       this.$message.error('修改状态失败')
       row.isShow=status
     }
    })
    },
    // 新增
    addArticle(){
      this.$router.push({path:'/content/addarticle'})
    }
  },
  components: {}
};
this;
</script>

<style lang="scss" scoped>
.card {
  margin-top: 30px;
  .cart-c {
    width: 90%;
    margin: 0 auto;
    label {
      font-weight: 400;
    }
  }
  .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: 400 !important;
  }
  .el-input__inner {
    background-color: #fff;
  }
}

.list_img {
  width: 150px;
  height: 150px;
}
</style>
